<template>
  <div id="shop">
  <NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center"><van-search v-model="word" placeholder="请输入搜索关键词" background="#13B194" class="center_item" /></div>
    <div slot="right" @click="trysearch('create_time')" class="search">搜索</div>
</NavBar>
    <div id="big_list">
<!--      <van-tabs v-model="active">-->
<!--        <div @click="itemclick('create_time')"><van-tab title="最新发布"></van-tab></div>-->
<!--  <div @click="itemclick('sales')"><van-tab title="销量">内容 2</van-tab></div>-->
<!--  <div @click="itemclick('price')"><van-tab title="价格">内容 3</van-tab></div>-->
<!-- <div> <van-tab title="筛选">内容 4</van-tab></div>-->
<!--</van-tabs>-->
      <van-row>
  <van-col span="6" class="item-tab" @click="itemclick({
  params:'create_time',
  index:0
  })"  :class="{active:tab_index===0}">最新</van-col>

         <van-col :class="{active:tab_index===1}" span="6" class="item-tab" @click="itemclick({
  params:'sales',
  index:1
  })">销量</van-col>
         <van-col :class="{active:tab_index===2}" span="6" class="item-tab" @click="itemclick({
  params:'price',
  index:2
  })">价格</van-col>
         <van-col span="6" :class="{active:tab_index===3}" class="item-tab" >筛选</van-col>
</van-row>

    </div>
    <div id="list_items">
<GoodList :goods="showGoods"></GoodList>
    </div>
    </div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import GoodList from "@/views/Shop/goods/GoodList";
import {getgoodList} from "@/network/Users/getgoodlist";
import {searchgoodList} from "@/network/Users/search_goods";

export default {
  components:{NavBar,GoodList},
  data(){
    return{
      word:'',
      active:0,
      tab_index:0,
      activetextcolor:'red',
      index:0,
      good:{
          'create_time':{'page':0,'list':[]},
          'sales':{'page':0,'list':[]},
          'price':{'page':0,'list':[]}
        },
        currentType:'create_time',
    }
  },

  computed:{
  //       textcolor(){
  //   return this.activecolor?{color:this.activetextcolor}:{}
  //   },
  //   activecolor(){
  //  return this.activetextcolor.indexOf(this.index) !== -1
  // },

      showGoods() {

        return this.good[this.currentType].list
      },
     // search_good1(ordering){
     //     searchgoodList(ordering,this.word).then(
     //         res=>{this.good[ordering].list.push(...res.list)}
     //     )
     //  }
  },
name: "Shop",
    methods: {
      compare(prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (val2 < val1) {
            return -1;
        } else if (val2 > val1) {
            return 1;
        } else {
            return 0;
        }
    }
},
  return_before(){
    this.$router.push('/home')
  },
      onAdd() {
      this.$toast('新增地址');
       this.$router.push('/address_increase')
    },
      itemclick(aaa){
        this.tab_index=aaa.index
        console.log(111);
        this.showGoods.sort(this.compare(aaa.params))
      },
       getHomeGoods(type){
        // const page=this.good[type].page+1
        //   getHomeGoods(type,page).then(
        //     res=>{this.good[type].list.push(...res.data.list);
        //     this.good[type].page++;
        //     this.$refs.scroll.finishPullUp()
        //     }
        //   )
         getgoodList(type).then(
             res=>{this.good[type].list.push(...res.list)}
         )
      },
        trysearch(){
           searchgoodList(this.word).then(
              res=>{
                this.good['create_time'].list.splice(0)
                this.good['create_time'].list.push(...res.list)}
           )
         }

},
created() {
    this.$emit('header',false)
this.getHomeGoods('create_time')

}}
</script>

<style scoped>
#shop{
  background-color: rgb(247,248,250);
  height: 1000px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
.van-search{
  height: 43px;
  padding: 10px 0px
}
.van-search__content--square{
      border-radius: 10px 10px 10px 10px;
    width: 247px;
}
#big_list{
border-radius: 35px 35px 0px 0px;
overflow: hidden;
height: 32px;
  background-color: white;
}
#big_list .van-tab{
  top: -6px;
left: 5px;
}
#list_items{
  height: 1000px;
      background: white;

}
.van-tab__text--ellipsis{
   margin-bottom: 10px;
}
.item-tab{
  /*margin-left: 10px;*/
  /*display: inline-block;*/
  text-align: center;
  position: relative;
  top: 5px;

}
.active{
  color: red;
}
/deep/ .center{
  position: relative;
left: -18px;
}
/deep/ .right{
  width: 60px;
position: relative;
left: -19px;
}
/*.item-tab:active{*/
/*  color: blue;*/
/*}*/
.search{
  /*width: 44px;*/
  margin-left: 10px;
}
/deep/ .van-tab__text--ellipsis{
  margin-bottom: 11px;
}
.center_item{
  margin-left: 10px;
}
</style>